import React, { useState } from 'react';
import { Table, Modal,Button} from 'antd';
import './ModalTable.css'
function ModalTable(props) {
    // console.log(props);

    //对话框
    // const App = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = (ev) => {
        // console.log(ev);
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 模态框title
    const CustomTitle = () => {
        return (
            <div className='CustomTitle_title'>
                查看
            </div>
        )
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'olderly_id',
            key: 'olderly_id',
        },
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
    ];
    const data = [
        {
            olderly_id: props.content.olderly_id,
            userName: props.content.userName,
            age: props.content.age,
            sex: props.content.sex
        },
    ]
    return (
        <div>
            <a onClick={showModal}>查看</a>
            <Modal name={props} width="895px" title={<CustomTitle ></CustomTitle>} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={[<Button key="back" onClick={handleCancel}>返回</Button>]}>
                <Table columns={columns} rowKey="olderly_id" dataSource={data} pagination={false} />
                <div className="ModalTable">
                    <div className="ModalTable_c1">
                        <div>
                            <p>健康得分</p>
                            <p>67</p>
                            <p>良好</p>
                        </div>
                        <div>
                            <p>健康报告</p>
                        </div>
                    </div>
                    <div className="ModalTable_c2">
                        <div>
                            <p>
                                <span>心率(次)</span>
                                <span>{props.content.heartRate}</span>
                                <span>血糖(mmol)</span>
                                <span>{props.content.bloodSugar}</span>
                            </p>
                            <p>
                                <span>血氧(%)</span>
                                <span>{props.content.bloodOxygen}</span>
                                <span>血脂(mmol)</span>
                                <span>{props.content.bloodFat}</span>
                            </p>
                            <p>
                                <span>血压(mmHg)</span>
                                <span>{props.content.bloodPressure}</span>
                                <span>膳食(cal)</span>
                                <span>{props.content.dietary}</span>
                            </p>
                        </div>
                        <div>
                            <p>{props.content.healthReport }</p>
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    )
}

export default ModalTable;